<template>
  <div class="card-content">
    <div class="card-item" v-for="(item, index) in cardContent" :key="index">
      <div :style="{color: item.color}">{{item.number}}</div>
      <div class="mark">
        <img src="../../../assets/images/sure.png" alt="" class="sure" v-if="item.status==='确诊'">
        <img src="../../../assets/images/doubt.png" alt="" class="doubt" v-else-if="item.status==='疑似病例'">
        <img src="../../../assets/images/cure.png" alt="" class="cure" v-else-if="item.status==='治愈'">
        <img src="../../../assets/images/die.png" alt="" class="die" v-else>
        <span style="fontSize:12px; color:#333">{{item.status}}</span>
      </div>
      <div class="addNum">
        <span style="color: #5C5C5C">较昨日</span>
        <span>+{{item.addNum}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        cardContent: [
          {
            number: 11177,
            mark: '../assets/sure.png',
            status: '确诊',
            addNum: 2103,
            color: '#FF9842',
            fontSize: '12px'
          },
          {
            number: 16898,
            mark: '../assets/doubt.png',
            status: '疑似病例',
            addNum: 2026,
            color: '#4A90E2',
            fontSize: '12px'
          },
          {
            number: 295,
            mark: '../assets/cure.png',
            status: '治愈',
            addNum: 80,
            color: '#30BD93',
            fontSize: '14px'
          },
          {
            number: 350,
            mark: '../assets/die.png',
            status: '死亡',
            addNum: 56,
            color: '#999999',
            fontSize: '14px'
          }
        ]
      }
    }
  }
</script>
<style lang="less" scoped>
  .card-content {
    display: flex;
    width: 100%;
    margin-top: 20px;
    .card-item {
      flex: 1;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 23px;
      &:first-child {
        .addNum {
          margin-left: 5px;
        }
      }
    }
    .mark {
      img {
        vertical-align: middle;
        margin-right: 3px;
      }
      .sure, .cure {
        width: 16px;
      }
      .doubt {
        width: 17px;
      }
      .die {
        width: 14px;
      }
    }
    .addNum {
      padding: 6px 0px;
      color: #333333;
      background-color: #eee;
      background:rgba(247,248,250,1);
      border-radius: 2px;
      font-size: 12px;
      margin-right: 5px;
      margin-top: 7px;
      > span {
        font-size: 10px;
      }
    }
  }
</style>